import React from "react";
import { Card, Space, Button, Checkbox, Form, Input, message } from "antd";
import "./index.scss";
import logo from "@/assets/logo.png";
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { fetchLogin } from "@/store/modules/user";
function Login() {

  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onFinish = (values) => {
    console.log("Success:", values);
    const loginForm = {
      mobile: values.mobile,
      code: values.password,
    };
    dispatch(fetchLogin(loginForm)).then((res) => {
      console.log('res-->>>', res);
      if (res.message === "OK") {
        message.success("登录成功");
        navigate("/");
      } else {
        message.error(res.msg);
      }
    });
  };

  return (
    <>
      <div className="login-container">
        <Card className="login-card" variant="borderless">
          <div className="card-header">
            <img src={logo} className="login-img" />
          </div>
          <div className="card-content">
            <Form
              name="basic"
              initialValues={{ remember: true, mobile: "13888888888", password: "246810"}}
              autoComplete="off"
              validateTrigger="onBlur"
              onFinish={onFinish}
            >
              <Form.Item
                label={null}
                name="mobile"
                rules={[
                  { required: true, message: "请输入手机号!" },
                  {pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号!"}

                ]}
              >
                <Input placeholder="请输入手机号" prefix={<UserOutlined />} />
              </Form.Item>

              <Form.Item
                label={null}
                name="password"
                rules={[
                  { required: true, message: "请输入密码!" },
                ]}
              >
                <Input.Password placeholder="请输入密码" prefix={<LockOutlined />}/>
              </Form.Item>

              <Form.Item name="remember" valuePropName="checked" label={null}>
                <Checkbox>记住我？</Checkbox>
              </Form.Item>

              <Form.Item label={null} className="login-btn">
                <Button type="primary" htmlType="submit" block>
                  点击登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </Card>
      </div>
    </>
  );
}

export default Login;
